import * as React from "react"
import { observable } from "mobx"
import { observer, inject } from "mobx-react"
import FN from "../tools/fn"

import { Router, Switch, Redirect, withRouter, Link,Route,NavLink} from 'react-router-dom'
import { hashHistory } from 'react-router';
import { CSSTransitionGroup } from 'react-transition-group'
import routes from '../../routes/animationRoute'

@inject("article")
@observer
export default class ChildrenRouter extends React.Component {
  constructor(props) {
    super(props)
    this.store = this.props.article
  }
  renderItem(){
    return routes.map((route, i) => {
        return (<div className="am-list-item" key={i}>
            <NavLink to={route.path} className="am-list-content" activeClassName="selected">{route.title}</NavLink>
            <div className="am-list-arrow" aria-hidden="true"><span className="am-icon arrow horizontal"></span></div>
        </div>);
   })
  }
  render() {
      console.log(routes)
    return (
        <div className="box box_v">
          
            <div className="am-list">
                    <div className="am-list-header">++++==路由动画++++++++==</div>
                        <div className="am-list-body">
                            {this.renderItem()}
                        </div>
                    </div>
                    <div style={{"position":"relative"}} className="animation-wrap">
                        <Route render={({ location }) => {
                            return(
                                <CSSTransitionGroup
                                    transitionName="left"
                                    transitionEnter={true}
                                    transitionLeave={true}
                                    transitionEnterTimeout={400}
                                    transitionLeaveTimeout={400}
                                >
                                    <div key={location.pathname} style={{"position":"absolute","width":"100%"}}>
                                            <Switch>
                                                <Redirect exact from="/animation/route" to="/animation/route/react" />
                                                {routes.map((route, i) => <Route    key={i}  {...route} />)} 
                                            </Switch>
                                    </div>
                                </CSSTransitionGroup>
                            )
                        }}/>
                    </div>
                  
               
      </div>
    )
  } 
}


